import { cn } from '@/utils/cn-merge';
import { Alert as AntAlert } from 'antd';
import type { AlertProps } from 'antd';
import '../styles/index.css';

interface CustomAlertProps extends AlertProps {
  className?: string;
}

const baseStyle = {
  borderRadius: '6px',
  padding: '6px 12px',
};

// 自定义alert, 修改type的颜色
const alertTypeColor = {
  info: {
    backgroundColor: 'var(--brand-color-light)',
    color: 'var(--text-5)',
    borderColor: 'var(--brand-color-disabled)',
  },
  success: {
    backgroundColor: '#F0FFF4',
    color: '#04C273',
    borderColor: '#04C273',
  },
  warning: {
    backgroundColor: '#FFF8E5',
    color: '#FF9226',
    borderColor: '#FF9226',
  },
  error: {
    backgroundColor: '#FFE5E5',
    color: '#FC5151',
    borderColor: '#FC5151',
  },
};

export const Alert = ({ className, ...props }: CustomAlertProps) => {
  return (
    <AntAlert
      className={className}
      style={{
        ...alertTypeColor[props.type as keyof typeof alertTypeColor],
        ...baseStyle,
        ...props.style,
      }}
      {...props}
    />
  );
};

export default Alert;
